<template>
  <div>
    <button @click='flag = !flag'>切换</button>
    <transition appear appear-from-class="fromclass" appear-active-class="activeclass" appear-to-class="toclass">
      <div v-if='flag' class="box"></div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const flag = ref(true)
</script>
<style scoped lang="less">
.box {
  width: 300px;
  height: 300px;
  background: red;
}

.fromclass {
  width: 0;
  height: 0;
}

.activeclass {
  transition: all 2s ease;
}

.toclass {
  width: 300px;
  height: 300px;
}
</style>